<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <title>更换头像页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" href="../../static/layui/css/admin.css" media="all" th:href="@{/layui/css/admin.css}">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="../../static/js/jquery-1.8.3.js" th:src="@{/js/jquery-1.8.3.js}"></script>
    <script type="text/javascript">

        $(function () {
            var addr = $("#headPortrait").html();
            $("#demo1").attr("src", addr);
        });

    </script>
</head>
<body>

<div class="layui-container">
    <div style="text-align: center; margin-top: 100px">
        <h2 align="center">更换头像</h2>
    </div>
    <div class="layui-upload" style="text-align: center;margin-top: 50px">
        <div class="layui-upload-list">
            <span style="display: none" id="headPortrait" sec:authentication="principal.headPortrait"></span>
            <img class="layui-upload-img"  style="width: 100px;height: auto;"
                 id="demo1">
            <p id="demoText"></p>
        </div>
        <button type="button" class="layui-btn" id="test1" style="width: 100px">上传图片</button>
        <br>
        <br>
        <a href="../index.html" th:href="@{/}" class="layui-btn" style="width: 100px">返回首页</a>
    </div>
</div>


<script src="../../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['upload', 'jquery'], function () {
        var $ = layui.jquery
            , upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: 'http://59.110.60.4:80/user/upload' //改成您自己的上传接口
            // , url: 'http://localhost:8081/user/upload' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, upload, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                layer.msg("上传成功！前往首页");
                // location.href = "http://localhost:8081/";
                location.href = "http://59.110.60.4:80/";
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });


    });
</script>


</body>
</html>